<template>
  <div class="combin">
    <el-dialog
      model
      :visible.sync="ismodelDialog1"
      :close-on-click-modal="false"
      top="0vh"
      width="100%"
      fullscreen
      :before-close="beforeClose"
    >
      <div class="content">
        <div class="conLef">
          <el-radio-group v-model="radio" style="height: 25px" @change="setaHandel">
            <el-radio label="餐桌">餐桌</el-radio>
            <el-radio label="餐椅">餐椅</el-radio>
          </el-radio-group>
          <div class="header-name">
            <search
              :options="selectData"
              :search-son="searchSon"
              :msg="tacitly"
              @seek="collect"
              @hand="handleChange"
            />
            <el-button
              type="primary"
              class="btn"
              size="mini"
              @click="handleChange"
            >
              {{ $t('btn.search') }}
            </el-button>
          </div>
          <el-tabs v-model="activeNames" @tab-click="handleChange">
            <el-tab-pane
              v-for="item in cardDate"
              :key="item.name"
              :label="item.name"
              :name="item.name"
            >
              <el-radio-group v-model="item.fids">
                <el-radio
                  v-for="ite in cardRedioData"
                  :key="ite.fid"
                  :label="ite.fid"
                  @click.native="radioHandel(item, ite)"
                >
                  <div class="ranking">
                    <img :src="ite.fimg">
                    <div>
                      {{ ite.fnumber }}<br>
                      {{ ite.fname }}{{ item.fspecification }}<br>
                      {{ ite.fdescription }}
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>
              <jc-pagination
                :total="total"
                :page.sync="pageNum"
                :limit.sync="pageSize"
                @pagination="handleChange(fname)"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="conRig">
          <div class="conRig_top">新BOM信息</div>
          <div class="information">
            <el-collapse v-model="activeNames2">
              <el-collapse-item
                v-for="item in cardDate"
                :key="item.name"
                :title="item.name + '信息'"
                :name="item.name"
              >
                <div v-if="item.redioSelect" class="radioDIV">
                  <div class="radioDIV2">
                    物料编码: {{ item.redioSelect.fnumber }}<br>
                    物料名称: {{ item.redioSelect.fname }}<br>
                    助记码: {{ item.redioSelect.fmodel }}<br>
                    物料规格: {{ item.redioSelect.fspecification }}<br>
                    物料描述: {{ item.redioSelect.fdescription }}<br>
                    物料成本: {{ item.redioSelect.fworth }}
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div style="margin-top: 5px">
            物料描述: {{ fdescriptionAll }}<br>
            物料成本: {{ fworth.toFixed(4) }}
          </div>
          <div class="conRig_bom">
            <el-button size="small" type="primary" @click="productBom">生成BOM</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      model
      :visible.sync="ismodelDialog"
      :close-on-click-modal="false"
      top="12vh"
      width="80%"
      :before-close="beforeClose"
    >
      <ul class="seleMode">
        <li v-for="item in modelist" :key="item" @click="setaHandel(item)">{{ item }}</li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import { queryTEngBoms } from '@/api/engineering/bomList'
import searData from '@/components/Search/mixin'
import search from '@/components/Search'

export default {
  name: 'Combination',
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 0,
      modelist: ['餐桌', '餐椅', '沙发', '吧椅'],
      radio: '餐桌',
      activeNames: '',
      cardDate: [
        { name: '面板', fids: '' },
        { name: '中柱', fids: '' },
        { name: '底盘', fids: '' }
      ],
      activeNames2: ['面板', '中柱', '底盘'],
      cardRedioData: [],
      redioSelect: [],
      fname: '',
      fdescriptionAll: '',
      fworth: 0,
      total: 0,
      pageNum: 1,
      pageSize: 50,
      ismodelDialog1: false,
      ismodelDialog: true
    }
  },
  watch: {
    cardDate: {
      handler(val) {
        this.fworth = 0
        this.fdescriptionAll = ''
        val.forEach(res => {
          this.fworth += Number(res.redioSelect.fworth)
          this.fdescriptionAll += res.redioSelect.fdescription + ','
        })
      },
      deep: true
    }
  },
  methods: {
    setaHandel(val) {
      this.ismodelDialog = false
      this.ismodelDialog1 = true
      this.radio = val
      if (val === '餐桌') {
        this.cardDate = [
          { name: '面板', fids: '' },
          { name: '中柱', fids: '' },
          { name: '底盘', fids: '' }
        ]
        this.activeNames2 = ['面板', '中柱', '底盘']
        this.activeNames = '面板'
      } else {
        this.cardDate = [
          { name: '软体', fids: '' },
          { name: '下架', fids: '' },
          { name: '包装', fids: '' }
        ]
        this.activeNames2 = ['软体', '下架', '包装']
        this.activeNames = '软体'
      }
      this.handleChange(this.cardDate[0])
    },
    // 点击折叠面板
    handleChange(ev) {
      this.fname = ev.name || this.fname
      const DATA = {
        pageNum: this.pageNum, // 当前页
        pageSize: this.pageSize,
        search: [
          { field: 'fnumber', seach: '2-', fid: 12 },
          { field: 'fname', seach: this.fname, fid: 12 }
        ]
      }
      queryTEngBoms(DATA).then(res => {
        if (res.code === 0) {
          this.cardRedioData = res.data.array
          res.data.array.map(res => {
            if (res.fnumber) {
              return res
            }
          })
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 点击单选框(把选择的值赋值到cardDate上)
    radioHandel(item, ite) {
      item.redioSelect = ite
      item.redioSelect.fworth = (Number(ite.fstuffcost) + Number(ite.flaborcost)).toFixed(4)
    },
    // 生成BOM
    productBom() {
      this.fnumberArr = []
      this.cardDate.forEach(res => {
        res?.redioSelect?.fnumber && this.fnumberArr.push({
          fnumber: res.redioSelect.fnumber,
          fmaterialId: res.redioSelect.fmaterialid
        })
      })
      // 关闭当前页面
      this.$store.dispatch('tagsView/guanbi', this.$route)
      this.$router.push({
        path: '/createBom',
        query: {
          fnumberArr: this.fnumberArr
        }
      })
    },
    beforeClose() {
      this.ismodelDialog = false
      this.ismodelDialog1 = false
      this.$store.dispatch('tagsView/guanbi', this.$route)
      this.$router.push({ path: '/listBom' })
    }
  }
}
</script>
<style lang="scss" scoped>
.combin {
  padding: 10px;
  background: #FFF;
  height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .seleMode {
    list-style: none;
    padding: 0;
    margin: 100px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    li {
      width: 250px;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      background: #FFF;
      opacity: 1;
      color: #333333;
      font-weight: 700;
      border: 1px solid #ddd;
      border-radius: 10px;
      margin: 0 20px;
      transition: all 0.2s;
      letter-spacing: 5px;
    }
    li:hover {
      background: rgba(30, 159, 255, 0.6);
      color: #FFF;
    }
  }
  .el-dialog__wrapper::v-deep .is-fullscreen {
    background: #FFF;
  }
  .content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .conRig {
      width: 500px;
      padding: 0 10px;
      background: #fff;
      border-left: 1px solid #d6d6d6;
      position: relative;
      .conRig_top {
        font-size: 18px;
        color: #333;
        text-align: center;
        margin-bottom: 5px;
      }
      .conRig_bom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: right;
      }
    }
    .conLef {
      width: 100%;
      background: #fff;
      //text-align: center;
      .header-name {
        width: 100%;
        position: relative;
        bottom: 5px;
        margin-bottom: 10px;
        .btn {
          transform: translateY(18%);
          margin-left: 450px !important;
        }
      }
      .el-radio-group {
        width: 100%;
        height: 75vh;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        .el-radio {
          width: 220px;
          white-space: break-spaces;
          color: #666;
          margin: 0 20px 10px;
          .ranking {

          }
          img {
            width: 200px;
            height: 200px;
          }
        }
      }
    }
  }
}
</style>
